<template>
  <div class="bind-box">
    <div class="bg-mask"></div>
    <div class="bind-content">
      <div class="modal-title">手机号码绑定</div>
      <div class="modal-tip">需要绑定手机号码才能进入</div>
      <div class="ipt-box">
        <input type="text" placeholder="请输入11位有效手机号码" maxlength="11" v-model="phone_num">
      </div>
      <div class="ipt-box code">
        <input type="text" placeholder="请输入验证码" v-model="code">
        <div class="code-btn" v-show="get_code_show" @click.stop="get_code">发送验证码</div>
        <div class="code-btn" v-show="!get_code_show">{{code_timeout}}s</div>
      </div>
      <div class="submit-btn" @click="submit_btn">确定</div>
    </div>
  </div>
</template>
<script>
import { getMemberSendcode, getMemberChecksms } from "../../api/api";
export default {
  props: {},
  data() {
    return {
      phone_num: "", //手机号码
      code: "", //验证码
      get_code_show: true, //获取验证码
      code_timeout: 60, // 倒计时
      submit_active: false //是否可提交
    };
  },
  methods: {
    //获取验证码
    get_code() {
      if (this.phone_num.trim() == "") {
        this.$toast("手机号不能为空");
        return;
      }
      this.phone_waring_msg = "";
      let data = {
        phone: this.phone_num
      };
      getMemberSendcode(data)
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            this.$toast("验证码已发送");
            this.get_code_show = false;
            let timer = null;
            clearInterval(timer);
            timer = setInterval(() => {
              if (this.code_timeout > 0) {
                this.code_timeout--;
              } else {
                this.code_timeout = 60;
                this.get_code_show = true;
                clearInterval(timer);
              }
            }, 1000);
          } else {
            this.$toast("获取失败");
            this.get_code_show = true;
          }
        })
        .catch(err => {
          this.$toast("获取失败");
          this.get_code_show = true;
        });
    },
    submit_btn() {
        console.log(this.phone_num,this.code)
      if (this.phone_num == "" || this.code == "") {
          console.log(111)
          this.$toast('手机号码或验证不能为空')
          return
      }
      let data = {
        phone: this.phone_num,
        code: this.code
      };
      getMemberChecksms(data)
        .then(res => {
          console.log(res);
          if (res.code == 1) {
            this.$toast("绑定成功");
            this.$emit('bind-success')
          } else {
            this.$toast(res.message);
          }
        })
        .catch(err => {
          this.$toast("绑定失败");
        });
    }
  }
};
</script>
<style scoped lang="scss">

.bind-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg-mask {
  background: rgba(0, 0, 0, 0.6);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.bind-content {
  z-index: 1000001;
  background-color: #fff;
  width: 3.25rem;
  height: 2.75rem;
  border-radius: 0.02rem;
  padding: 0.18rem 0.25rem;
  .modal-title {
    font-size: 0.2rem;
    font-weight: 500;
    color: rgba(48, 49, 51, 1);
    line-height: 0.28rem;
  }
  .modal-tip {
    font-size: 0.14rem;
    font-weight: 500;
    color: rgba(144, 147, 153, 1);
    line-height: 0.2rem;
    margin-bottom: 0.25rem;
  }
  .ipt-box.code {
    input {
      width: 1.6rem;
    }
  }
  .ipt-box {
    display: flex;
    align-items: center;
    margin-bottom: 0.16rem;
    justify-content: space-between;
    input {
      width: 100%;
      border-radius: 0.02rem;
      border: 0.01rem solid rgba(238, 238, 238, 1);
      height: 0.42rem;
      padding: 0 0.16rem;
      box-sizing: border-box;
    }
    .code-btn {
      width: 1.07rem;
      height: 0.42rem;
      border-radius: 0.02rem;
      border: 0.01rem solid rgba(0, 136, 255, 1);
      font-size: 0.14rem;
      font-weight: 500;
      color: rgba(0, 136, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .submit-btn {
    width: 100%;
    height: 0.42rem;
    background: rgba(0, 136, 255, 1);
    border-radius: 0.02rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.14rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
  }
}
</style>


